<template>
  <q-page class="row items-center justify-evenly">
    <article-list
      :articles="articles"
      @pageChange="pageChange"
      :pagination="pagination"
    ></article-list>
  </q-page>
</template>

<script lang="ts">
import { Todo, Meta } from 'components/models';
import ExampleComponent from 'components/ClassComponent.vue';
import { Vue, Component } from 'vue-property-decorator';
import articleList from 'src/components/article/list.vue';
import { Console } from 'console';
@Component({
  components: { ExampleComponent, articleList },
  mounted() {
    this.$store.dispatch('article/FetchList');
    this.$store.dispatch('headerCover/Init', {
      visible: true,
      bgImg:
        'https://tva4.sinaimg.cn/large/0084aYsLly1ge7bivvvswj31hc0u078j.jpg',
      title: '虚度光阴的一些证据',
      showArrow: true,
      subTitle: '什么结局能配得上这一路颠沛流离'
      // subtitle: `最后更新与${store.state.article.archive.data.statistics.lastUpdateTime}`,
    });
  }
})
export default class PageIndex extends Vue {
  get articles(): Array<any> {
    return this.$store.state.article.articles.data;
  }

  get pagination(): any {
    return { ...this.$store.state.article.articles.pagination };
  }
  //分页点击回调
  public async pageChange(page: number) {
    console.log('分页会带哦', page);
    // var param = Object.create(this.pagination);
    // param.page=page;
    var param = { page: page, pageSize: this.pagination.pageSize };
    await this.$store.dispatch('article/FetchList', param);
  }
}
</script>
